/*
  给element-ui 表格添加水印
*/

import type { DirectiveBinding } from 'vue';
const addWaterMarker = (str: string, parentNode: any, value: any) => {
  const { width, height, isHide } = value || {};
  if (!isHide) {
    // 水印文字，父元素，字体，文字颜色
    let can: HTMLCanvasElement = document.createElement('canvas');
    const scrollbar: any = document.querySelectorAll('.el-scrollbar__wrap');

    can.width = width || 100;
    can.height = height || 120;
    can.style.display = 'none';
    let cans = can.getContext('2d') as CanvasRenderingContext2D;
    cans.rotate((-20 * Math.PI) / 90);
    cans.font = '14px Microsoft JhengHei';
    cans.fillStyle = 'rgba(180, 180, 180, 0.3)';
    cans.textAlign = 'left';
    cans.textBaseline = 'middle' as CanvasTextBaseline;
    cans.fillText(str, can.width / 10, can.height / 2);

    for (let item of scrollbar) {
      item.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')';
    }
  }
};

const tableWaterMarker = {
  mounted(el: DirectiveBinding, binding: DirectiveBinding) {
    addWaterMarker(useUserStore().userInfo.nick, el, binding.value);
  }
};

export default tableWaterMarker;
